<template>
  <div id="detail">
    <detail-nav-bar class="detail-nav" @titleClick="titleClick" ref="nav"/>
    <scroll class="content" ref="scroll"
            @scroll="contentScroll"
            :probe-type="3">
      <!-- <div>{{$store.state.cartList.length}}</div> -->
      <!-- <ul>
        <li v-for="(item,index) in $store.state.cartList" :key="index">{{item}}</li>
      </ul> -->
      <detail-swiper :top-images="topImages"/>
      <detail-base-info :goods="goods" />
      <!-- 店铺基本信息 -->
      <detail-shop-info :shop="shop"/>
      <!-- 商品详情图片信息 -->
      <detail-image-info :detail-info ="detailInfo" @detailImageLoad="detailImageLoad"/>
      <!-- 商品参数信息 -->
      <detail-param-info :param-info="paramInfo" ref="params"/>
      <!-- 评论信息 -->
      <detail-comment-info :comment-info="commentInfo" ref="comment"/>
      <!-- 推荐模块 -->
      <goods-list :goods="recommends" ref="recommends"/>
    </scroll>
    <!-- 底部工具栏 -->
    <detail-bottom-bar @addToCart="addToCart"/>
    <!-- 返回顶部按钮的组件 -->
    <back-top @click.native="backClick" v-show="isShowBackTop"/>

    <!-- <toast :message="message" :show="show"/> -->
  </div>
</template>

<script>
import DetailNavBar from './childComps/DetailNavBar'
// 轮播图
import DetailSwiper from './childComps/DetailSwiper'
// 商品基本信息
import DetailBaseInfo from './childComps/DetailBaseInfo'
// 店铺基本信息
import DetailShopInfo from './childComps/DetailShopInfo'
// 商品详情图片信息
import DetailImageInfo from './childComps/DetailImageInfo'
// 商品参数信息
import DetailParamInfo from './childComps/DetailParamInfo'
// 评论信息
import DetailCommentInfo from './childComps/DetailCommentInfo'
// 底部工具栏
import DetailBottomBar from './childComps/DetailBottomBar'
// 返回顶部
// import BackTop from 'components/content/backTop/BackTop'

// 引入封装好了的better-scroll
import Scroll from 'components/common/scroll/Scroll'
// 展示推荐模块内容引入的组件
import GoodsList from 'components/content/goods/GoodsList'
// import Toast from 'components/common/toast/Toast'

import {getDetail,getRecommend,Goods,Shop,GoodsParam,} from 'network/detail'
import {debounce} from 'common/utils'
import {itemListenerMixin} from 'common/mixin'
import {backTopMixin} from 'common/mixin'

import { mapActions } from 'vuex'

export default {
  name:'Detail',
  components:{
    DetailNavBar,
    DetailSwiper,
    DetailBaseInfo,
    DetailShopInfo,
    DetailImageInfo,
    DetailParamInfo,
    DetailCommentInfo,
    DetailBottomBar,
    // BackTop,

    Scroll,
    GoodsList,
    // Toast
  },
  mixins:[itemListenerMixin,backTopMixin],
  data(){
    return {
      iid:null,
      topImages:[],
      goods:{},
      shop:{},
      detailInfo:{},
      paramInfo:{},
      commentInfo:{},
      recommends:[],
      // 详情页的高度
      themeTopYs:[],
      getThemeTopY:null,
      currentIndex:0,
      // 默认情况下，返回顶部是不显示的
      // isShowBackTop:false,

      message:'',
      show:false
    }
  },
  created(){
    // 保存传入的iid
    this.iid = this.$route.params.iid
    // 根据iid请求数据
    getDetail(this.iid).then(res=>{
      // console.log(res);
      // 因为获取数据总是要使用到res.result，所以把它赋给data方便后面使用
      const data = res.result;
      // 获取顶部的轮播图图片数据
      this.topImages = data.itemInfo.topImages
      // 获取商品的基本信息
      this.goods = new Goods(data.itemInfo,data.columns,data.shopInfo.services)
      // 获取店铺信息
      this.shop = new Shop(data.shopInfo)
      // 保存商品的详情图片等数据
      this.detailInfo = data.detailInfo;
      // 获取商品的参数信息
      this.paramInfo = new GoodsParam(data.itemParams.info,data.itemParams.rule);
      // 获取评论信息,有些会没有评论信息，所以需要提前判断，根据cRate判断
      if(data.rate.cRate !== 0){
        this.commentInfo = data.rate.list[0]
      }


      /*
      // 1. 第一次获取，值不对
      // 原因：这个时候this.$refs.params.$el还没有被渲染出来
      this.themeTopYs = []
      this.themeTopYs.push(0);
      this.themeTopYs.push(this.$refs.params.$el.offsetTop);
      this.themeTopYs.push(this.$refs.comment.$el.offsetTop);
      this.themeTopYs.push(this.$refs.recommends.$el.offsetTop);
      console.log(this.themeTopYs);

      // 2. 第二次获取，值依旧不对
      // 原因：图片还没加载完，计算出来的高度没有图片
      // nextTick函数，是等到子组件获取到数据并且渲染完以后回调这个函数，
      this.$nextTick(()=>{
        // 根据最新的数据，对应的DOM是已经被渲染出来，
        // 但是图片依然是没有加载完（目前获取到的高度是不包含其中的图片高度的）
        // offsetTop值不对的时候大多数都是因为图片的问题，高度不对
        this.themeTopYs = []
        // 给themeTopYs模块高度数组传进来每个内容模块的高度
        this.themeTopYs.push(0);
        this.themeTopYs.push(this.$refs.params.$el.offsetTop);
        this.themeTopYs.push(this.$refs.comment.$el.offsetTop);
        this.themeTopYs.push(this.$refs.recommends.$el.offsetTop);
        console.log(this.themeTopYs);
      })
    */
    })

    // 请求推荐数据
    getRecommend().then(res=>{
      // console.log(res);
      this.recommends = res.data.list
    })

    // 给getThemeTopY赋值,对themeTopYs的赋值操作进行防抖
    this.getThemeTopY = debounce(()=>{
      this.themeTopYs = []
      this.themeTopYs.push(0);
      this.themeTopYs.push(this.$refs.params.$el.offsetTop);
      this.themeTopYs.push(this.$refs.comment.$el.offsetTop);
      this.themeTopYs.push(this.$refs.recommends.$el.offsetTop);
      // console.log(this.themeTopYs);
    },200)
  },
  mounted(){
    // console.log('aaa');
    // 监听图片加载完成
    // this.$bus.$on('detailImageLoad',this.itemImgListener);
  },
  destroyed(){
    this.$bus.$off('ItemImageLoad',this.itemImgListener)
  },
  methods:{
    ...mapActions(['addCart']),
    detailImageLoad(){
      this.refresh()
      this.getThemeTopY()
      // console.log('111');

    },

    titleClick(index){
      console.log(index);
      // 计算详情页的高度
      this.$refs.scroll.scrollTo(0,-this.themeTopYs[index],200);
    },
    contentScroll(position){
      // console.log(position);
      // 获取y值
      const positionY = -position.y
      // 把这个positionY值与标题对应内容的高度值进行对比
      // 在positionY的值在对应模块内容的范围内就返回这个内容对应的标题索引号
      let length = this.themeTopYs.length
      for(let i =0;i<length;i++){
        // if(positionY > this.themeTopYs[i] && positionY < themeTopYs[i+1]){
        //   console.log(i);
        // }
        if(this.currentIndex !== i && ((i < length - 1 && positionY >= this.themeTopYs[i] && positionY < this.themeTopYs[i+1]) || (i ===length - 1 && positionY >= this.themeTopYs[i]))){
          // console.log(i);
          this.currentIndex = i;
          console.log(this.currentIndex);
          this.$refs.nav.currentIndex = this.currentIndex
        }
      }
      // 是否显示回到顶部
      this.isShowBackTop = (-position.y) > 1000
    },
    // backClick(){
    //   this.$refs.scroll.scrollTo(0,0,500)
    // },
    addToCart(){
      // 获取在购物车需要展示的部分信息
      const product = {}
      product.image=this.topImages[0]
      product.title = this.goods.title
      product.desc= this.goods.desc
      product.price = this.goods.realPrice
      product.iid = this.iid

      // 将商品信息添加到购物车里
      // this.$store.commit('addCart',product)


      // this.$store.dispatch('addCart',product).then(res => {
      //   console.log(res);
      // })


      this.addCart(product).then(res=>{
        this.$toast.show(res,2000)

        // console.log(res);
        // this.show = true;
        // this.message = res;
        // setTimeout(() => {
        //   this.show = false;
        //   this.message = ''
        // }, 1500);
      })


    }
  }
}
</script>

<style scoped>
/* 把详情页底部的tabbar隐藏起来 */
  #detail{
    position: relative;
    z-index:9;
    background-color: #fff;
    height: 100vh;
  }

  .detail-nav{
    position: relative;
    z-index:9;
    background-color: #fff;
  }
  /* 用了better-scroll必须给内容高度 */
  .content{
    /* overflow: hidden; */
    overflow: hidden;
    position: absolute;
    top:44px;
    bottom:49px;
  }
</style>
